<template>
    <div>
        <div class="ui container">
            <button name="button-hoodie" class="ui button" @click="onButtonClick">Hoodie</button>
            <button name="fullstack-tee" class="ui button" @click="onButtonClick">Tee</button>
            <button name="button-fitted-cap" class="ui button" @click="onButtonClick">Fitted Cap</button>
            <button name="button-jacket" class="ui button" @click="onButtonClick">Jacket</button>
        </div>
        <div class="ui container">
            <h2 class="ui header">Fullstack Clothing Inquiry Sheet</h2>
            <div class="input-form">
                <form class="ui form" @submit="submitForm">
                    <div class="field">
                        <input v-model="newItem" type="text" placeholder="Add an Item">
                    </div>
                    <button class="ui button">Submit</button>
                </form>
                <div class="ui segment">
                    <h4 class="ui header">Items</h4>
                    <ul style="text-align: left">
                        <li v-for="item in items" class="item" :key="item">{{item}}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({})
export default class BaseComponent01 extends Vue {
    name = 'BaseComponent01';
    newItem = "";
    items:Array<string> = [];
    private onButtonClick(evt:any){
        const button = evt.target;
        console.log(`The user clicked ${button.name}:${button.value}`);
    }

    private submitForm(evt:any){
        this.items.push(this.newItem);
        this.newItem = "";
        evt.preventDefault();
    }
}
</script>

<style scoped>

</style>
